<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <label for="">省</label>
    <select name="" id="" class="sheng"></select>
    <label for="">市</label>
    <select name="" id="" class="shi"></select>
    <label for="">区</label>
    <select name="" id="" class="qu"></select>
  </body>
  <script src="./cities.js"></script>
  <script>
    window.onload = function () {
      var sheng = document.querySelector(".sheng");
      var a = '<option value="">请选择</option>';
      for (var i = 0; i < data.length; i++) {
        var item = data[i];
        a += `<option value="${item.code}">${item.name}</option>`;
      }
      sheng.innerHTML = a;

      /*==================================================================*/
      var shi = document.querySelector(".shi");
      var sheng = document.querySelector(".sheng");
      sheng.addEventListener("change", function (e) {
        for (var i = 0; i < data.length; i++) {
          var item = data[i];
          var cit = item.children;
          if (item.code === e.target.value) {
            var b = `<option value="">请选择</option>`;

            for (var j = 0; j < cit.length; j++) {
              var item1 = cit[j];
              b += `<option value="${item1.code}">${item1.name}</option>`;
            }
            shi.innerHTML = b;
          if (sheng.value === "") {
            shi.innerHTML = `<option value="">请选择</option>`;
            qu.innerHTML = `<option>请选择</option>`;
          }
          }
          
        }
      });
      /*==================================================================*/
      var qu = document.querySelector(".qu");

      var shi = document.querySelector(".shi");
      shi.addEventListener("change", function (e) {
        for (var i = 0; i < data.length; i++) {
          var item = data[i];
          var cit = item.children;
          for (var j = 0; j < cit.length; j++) {
            var item1 = cit[j];
            var q = item1.children;
            if (item1.code === e.target.value) {
              var c = `<option value="">请选择</option>`;
              for (var k = 0; k < q.length; k++) {
                var item2 = q[k];
                c += `<option value="${item2.code}">${item2.name}</option>`;
              }
              qu.innerHTML = c;
              if ((shi.value = "")) {
                qu.innerHTML = `<option>请选择</option>`;
              }
            }
          }
        }
      });
    };
  </script>
</html>
